<style>
    .pTitle {
        margin-top: 0px;
    }

    .pTitle span {
        display: inline;
        font-size: 20px;
        line-height: 34px;
        font-weight: 400;
        overflow: hidden;
    }

    .question {
        color: #2baab1;
        height: 26px;
        font-size: 26px;
    }

    .problem-info {
        padding-bottom: 12px;
        padding-top: 8px;
        margin-bottom: 25px;
        border-bottom: 1px solid #e8ecee;
    }

    .problem-info span {
        font-size: 12px;
        color: #9eadb6;
    }

    .f-pipe {
        margin: 0 8px;
        height: 13px;
        overflow: hidden;
        width: 1px;
        position: relative;
        top: -2px;
        background: #e8ecee;
        color: #e8ecee;
        display: inline-block;
        vertical-align: middle;
    }

    .answer-bar {
        display: inline-block;
        margin-bottom: 10px;
        width: 90px;
        height: 34px;
        background: #4dc86f;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        color: #fff;
        line-height: 34px;
        cursor: pointer;
    }

    .answer-line {
        position: relative;
        line-height: 29px;
        margin-top: 15px;
    }

    .answerContent {
        width: 70%;
        display: none;
    }

    .submit-btn {
        cursor: pointer;
        color: #fff;
        display: inline-block;
        text-align: center;
        border-radius: 2px;
        height: 30px;
        line-height: 30px;
        font-family: "Microsoft Yahei";
        font-size: 15px;
        padding: 0 15px;
        background: #4dc86f;
        border-color: #4dc86f;

    }

    .submit-answer {
        margin-top: 10px;
        text-align: right;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .my-answer {
        padding-top: 15px;
        padding-bottom: 15px;
        margin-bottom: 30px;
        border-bottom: 1px solid #e8ecee;
        position: relative;
        margin-left: 50px;
        margin-right: 50px;
        background-color: #fff;
        padding-left: 30px;
    }

    .answer-title {
        margin-top: 2px;
        height: 26px;
        font-size: 22px;
        color: #35b558;
        font-weight: 400;
    }

    .c-time {
        display: inline;
        font-size: 12px;
        color: #9eadb6;
    }

    .my-answer-content {
        margin-top: 5px;
        font-size: 14px;
        line-height: 24px;
        color: #333;
    }

    .footer-line {
        height: 32px;
        margin-top: 15px;
        line-height: 32px;
    }

    .del-myAnswer {
        float: right;
        border: 1px solid #DAE0E4;
        font-size: 14px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        color: #33b358;
        display: inline-block;
        width: auto;
        padding: 0 15px;
        margin-right: 10px;
        cursor: pointer;
    }

    .edit-myAnswer {
        float: right;
        border: 1px solid #DAE0E4;
        font-size: 14px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        color: #33b358;
        display: inline-block;
        width: auto;
        padding: 0 15px;
        margin-right: 50px;
        cursor: pointer;
    }

    .edit-cancle {
        float: right;
        border: 1px solid #DAE0E4;
        font-size: 14px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        color: #33b358;
        display: none;
        width: auto;
        padding: 0 15px;
        margin-right: 10px;
        cursor: pointer;
    }

    .my-answer-icon {
        width: 26px;
        height: 26px;
        display: inline-block;
        line-height: 0px;
        color: #35b558
    }

    .otherReplay {
        padding-bottom: 15px;
        margin-bottom: 30px;
        border-bottom: 1px solid #e8ecee;
        background-color: #fff;
    }

    .adopt-answer {
        float: right;
        border: 1px solid #DAE0E4;
        font-size: 14px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        color: #33b358;
        display: inline-block;
        width: auto;
        padding: 0 15px;
        margin-right: 50px;
        cursor: pointer;
    }

    #content-data {
        margin-top: 20px;
        position: relative;
        margin-left: 50px;
        margin-right: 50px;
        background-color: #fff;
        padding-left: 30px;
    }

    #content-data ::after {
        position: absolute;
        top: 23px;
        left: -6px;
        display: inline-block;
        border-top: 6px solid transparent;
        border-right: 6px solid #ffffff;
        border-bottom: 6px solid transparent;
        content: '';
    }

    .leftDate {
        position: absolute;
        top: 10px;
        left: -20px;
        width: 40px;
        height: 40px;
        line-height: 36px;
        font-size: 10px;
        border: 2px solid #e36159;
        color: #e36159;
        background-color: #fff;
        text-align: center;
        border-radius: 50%;
    }

    .my-answer:after {
        position: absolute;
        top: 23px;
        left: -6px;
        display: inline-block;
        border-top: 6px solid transparent;
        border-right: 6px solid #ffffff;
        border-bottom: 6px solid transparent;
        content: '';
    }
    .head-line {
        margin-bottom: 10px;
    }
    .leftTop {
        content: '';
        position: absolute;
        display: block;
        width: 40px;
        height: 40px;
        line-height: 35px;
        text-align: center;
        border-radius: 50em;
        -moz-border-radius: 50em;
        -webkit-border-radius: 50em;
        top: 0;
        left: 46px;
        font-size: 15px;
        border: 2px solid lightgray;
        color: #00ccde;
        background-color: #fff;
    }
</style>
<script>
    var devName = '{{ devName }}';
    var tabletId = '{{ tabletId }}';
</script>
<div class="smart-widget" id="table" style="background-color:#f5f5f5;border: 0px;margin-bottom: 0px;height: 100%;overflow: auto;">
    <div class="smart-widget-inner">
        <div class="smart-widget-body" style="position: relative;padding: 16px;padding-top:60px;">
            {% if data is not empty %}
                <div style="height:98%; width: 3px;background-color:#e7eaef;position: absolute;left: 65px;top: 30px;"></div>
                <div class="leftTop"><i class="fa fa-calendar  fa-lg fa-fw question"></i></div>
                {% for key, noteInfo in data %}
                    <div style="position: relative;margin-left: 50px;margin-bottom: 25px;">
                        <div id="content-data">
                            <h4 class="pTitle">
                                <i class="fa fa-info-circle fa-lg fa-fw question"></i>
                                {% if noteInfo['pen'] is not empty %}
                                    <span>{{ noteInfo['pen'] }}</span>
                                    <span>|</span>
                                {% endif %}
                                <span>{{ noteInfo['abnormal'] }}</span>
                                {% if noteInfo['imageUrl'] is not empty %}
                                    {% if noteInfo['imageUrl'] | length > 0  %}
                                        {% for i,url in noteInfo['imageUrl']  %}
                                            <span>|</span>
                                            <span><a href="{{ url }}" target="_blank">查看附件{{ i+1 }}</a></span>
                                        {% endfor %}
                                    {% endif %}
                                {% endif %}
                            </h4>
                                {% if noteInfo['accessory'] is not empty %}
                                    <div style="word-wrap:break-word;width: 100%;padding-bottom: 5px">
                                        <span>【备注配件数量】</span>
                                        {% for accessInfo in noteInfo['accessory'] %}
                                            <span>{{ accessInfo['name'] }}：{{ accessInfo['num'] }}</span>
                                            <span>|</span>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            <div style="word-wrap:break-word;width: 100%">
                                【备注信息】{{ noteInfo['noteMag'] }}
                            </div>
                            <div class="problem-info">
                                <span>{{ noteInfo['createId'] }}</span>
                                <span>备注于{{ noteInfo['createDate'] }}</span>
                            </div>
                            {% if noteInfo['checkMsg'] is not empty %}
                                {% for k,checkInfo in noteInfo['checkMsg'] %}
                                    <div style="padding-left: 15px;padding-top:15px;padding-right: 15px;background-color: #DDDDDD;">
                                        <div style="word-wrap:break-word;width: 100%;">
                                            {{ checkInfo['checkDetail'] }}
                                        </div>
                                        <div class="problem-info">
                                            <span>{{ checkInfo['createId'] }}</span>
                                            <span>审核于{{ checkInfo['createDate'] }}</span>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% endif %}
                            <div class="answer-line">
                                {% if power['check'] is true %}
                                    <span class="answer-bar" id="check_{{ noteInfo['noteId'] }}"><i class="fa fa-pencil-square-o fa-lg fa-fw"></i>审核</span>
                                {% endif %}
                            </div>
                            <div class="answerContent" id="editContent_{{ noteInfo['noteId'] }}">
                                <textarea title="填写内容" name='sContent_{{ noteInfo['noteId'] }}' id='sContent_{{ noteInfo['noteId'] }}' rows="13" style="height:200px;"></textarea>
                                <div class="submit-answer">
                                    <span class="submit-btn" id="submit_{{ noteInfo['noteId'] }}">提交</span>
                                </div>
                            </div>
                        </div>
                        <div class="leftDate">
                            {{ noteInfo['date'] }}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div>暂无记录</div>
            {% endif %}
        </div>
    </div>
</div>
